import { Popover, Button } from "antd";
import IconFont from "@/components/IconFont";
import { GoodHead, GoodField } from "@/views/components/TableGoods";
import GoodsDetail from '../ColumnConfig/GoodsDetail.jsx';

//地址渲染Icon
const iconStyle = {
	marginLeft: '4px',
	cursor: 'pointer'
}


//渲染商品表头
function GoodsTitleRender({ imageShowConfig, updateImgShowConfig, setImageShowConfig }) {
	const content = (
		<GoodHead initValues={imageShowConfig}
			onChange={v => {
				updateImgShowConfig(v);
				setImageShowConfig(v);
			}}
		/>
	)
	return (
		<>
			<span>商品</span>
			<Popover
				placement="bottom"
				content={content}
			>
				<IconFont style={iconStyle} type="icona-lujing13" />
			</Popover>
		</>
	)
}

//渲染商品信息
function GoodsRender({ value, record, imageShowConfig }) {
	const showAll = imageShowConfig.all;
	let totalNum = value.reduce((pre, next) => { return pre + Number(next.goodsNum) }, 0);
	let totalPrice = value.reduce((pre, next) => { return pre + Number(next.ecGoodsPrice) * next.goodsNum }, 0);;
	return (
		<Popover
			title="查看商品详情"
			trigger={['click']}
			content={<GoodsDetail type="orderGoods" data={record.goodsList} />}
			getPopupContainer={triggerNode => triggerNode.parentNode || document.body}
		>
			<div style={{ cursor: 'pointer' }}>
				{value?.slice(0, showAll ? value.length : 2)?.map((item, idx) => {
					if (!record.runVolume || item.type === 2) {
						return (
							<GoodField
								key={idx}
								record={{
									image: item.goodsName ? item.goodsImage : item['ecGoodsImage'],
									count: item['goodsNum'],
									name: item.goodsName ? item.goodsName : item['ecGoodsName'],
									color: item.goodsName ? item.goodsSpec : item['ecGoodsSpec'],
									goods:item.goodsName ? item.skuCode: item['ecSkuId'],
									price: item.goodsName ? item.goodsPrice : item['ecGoodsPrice'],
									style:item.goodsName ? item.spuCode : item['ecSpuId'],
									storeId: item['storeId']
								}}
								config={imageShowConfig}
							/>
						);
					}
				})}
				<div style={{ display: 'flex', justifyContent: 'space-between' }}>
					<div>{!showAll && value.length > 2 && '...'}</div>
					{totalNum && <div style={{ color: '#333', fontWeight: 600 }}>合计：¥{totalPrice}、{totalNum}件</div>}
				</div>
			</div>
		</Popover>
	);
};

//系统订单号筛选
const OrderSnRender = ({ record, handleModalOpera, triggerSearchCb }) => {
	if (record.orderList.length == 0) {
		return <Button type="link" onClick={() => handleModalOpera('claimUnMessage', record)}>无信息件认领</Button>
	}
	return (
		record.orderList.map((v, index) => {
			return (
				<div key={index}>
					<div>{v.orderSn}</div>
					{ v.relationAfterSaleCount > 1 && <Button type="link" onClick={()=>triggerSearchCb({ orderSn: [v.orderSn] })}>
						关联{v.relationAfterSaleCount}笔售后单</Button> }
				</div>
			)
		})
	)
}


export const getCellRenderComp = (modalProps) => {
	const cellRenderConfig = {
		'goodsList': {
			'title': () => (<GoodsTitleRender {...modalProps} />),
			'render': (v, r) => (<GoodsRender {...{ ...modalProps, record: r, value: v }} />)
		},
		'orderSn': {
			'render': (v, r) => (<OrderSnRender {...{ ...modalProps, record: r, value: v }} />)
		},
	}
	return cellRenderConfig;
}

